<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟注册验证</title>
		<style>
			#email{
				background-image: url("image/mail-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#user1{
				background-image: url("image/user-3-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#password,#confirmpsw{
				background-image: url("image/key-2-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#check{
				background-image: url("image/qr-code-line.png");
				background-repeat: no-repeat;
				padding-left: 30px;
				line-height: 20px;
				margin: 10px auto;
			}
			#register{
				background-color: blue;
				color: azure;
				margin: 10px 30px;
				height: 30px;
				width: 80px;
				border: 1px solid lightgrey;
			}
			#ss{
				background-color: blue;
				color: aliceblue;
				margin-left: 10px;
			}
			#reg{
				margin-left:10px;
				padding-left: 10px;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//var emailx=user1x=passwordx=confirmpswx= checkx= false;
				$("#email").blur(function(){
					var email= $(this).val();
					var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/gi;
					var ok= regExp.test(email);
					if(email==""){
						$(this).next().text("邮箱不能为空").css("color","red");
						return false;
					}else{
						if (ok) {
							$(this).next().text("√").css("color","green");
							return true;
						} ;
						$(this).next().text("您输入的格式有误").css("color","red");
						return false;
					};
				});
				
				
				$("#user1").blur(function(){
					var user1= $(this).val();
					var regExp=/^[a-zA-Z]\w{5,17}$/gi;
					var ok= regExp.test(user1);
					if(user1==""){
						$(this).next().text("用户名不能为空").css("color","red");
						return false;
						}else{
							if (ok) {
								$(this).next().text("√").css("color","green");
								return true;
							} ;
							$(this).next().text("您输入的用户名有误").css("color","red");
							return false;
						};
				});
				
				$("#password").blur(function(){
					var password= $(this).val();
					var regExp=/^[a-zA-Z]\w{5,17}$/gi;
					var ok= regExp.test(password);
					if(password==""){
						$(this).next().text("密码不能为空").css("color","red");
						return false;
					}else{
						if (ok) {
							$(this).next().text("√").css("color","green");
							return true;
						} ;
						$(this).next().text("您输入的密码有误").css("color","red");
						return false;
					}
						
					
				});
				
				$("#confirmpsw").blur(function(){
					var confirmpsw= $(this).val();
					var password= $("#password").val();
					
					if (confirmpsw == password) {
						$(this).next().text("√").css("color","green");
						return true;
					} ;
					$(this).next().text("两次密码不一致").css("color","red");
					return false;
				});
				
				$("#check").blur(function(){
					var check= $(this).val();
					var ss=$("#ss").text();
					//var ss= document.getElementById("ss");
					
					console.log(ss);
					if (check ==ss) {
						$(this).next().next().text("√").css("color","green");
						return true;
					} ;
					$(this).next().next().text("验证码错误").css("color","red");
					return false;
				});
				
				// $("#radio").click(function(){
				// 	var count=0;
				// 	var checkbox=$('input[name=choice]');
				// 	var s=checkbox.is(':checked');
				// 	console.log(s);
				// 	if (count%2==0) {
				// 		$(this).next().next().text("");
				// 		return true;
						
				// 	};
				// 		$(this).next().next().text("请勾选协议").css("color","red");
				// 		return false;
				// 	}		
				// });
				
				$("#register").click(function(){
					$("form").submit();
					// return emailx && user1x && passwordx && confirmpswx && checkx;
				});
				
			});
		</script>
	</head>
	<body>
		<form action="2lh.html" id="formd">
			<input type="text" name="email" id="email" placeholder="请输入邮箱"><span class="reg"> </span>
			<br>
			<input type="text" name="username" id="user1" required placeholder="请输入用户名"><span class="reg"> </span>
			<br>
			<input type="password" name="password" id="password" required placeholder="请输入密码"><span class="reg"></span>
			<br>
			<input type="password" name="password" id="confirmpsw" placeholder="再次输入密码"><span class="reg"></span>
			<br>
			<input type="text" name="check" id="check" placeholder="输入右侧验证码"><span id="ss">4632</span><span class="reg"></span>
			<br>
			<input type="checkbox" required name="choice" id="radio"><span id="span">同意<a href="#" id="a1">用户服务条款</a></span><span class="r"></span>
			<br>
			<input type="button" value="注册" id="register">
		</form>
	</body>
</html>